<template>
  <div>
    <!-- 头部导航 -->
    <van-nav-bar :fixed="true" placeholder safe-area-inset-top>
      <!-- logo和搜索使用了插槽技术 -->
      <template #left>
        <img
          src="../../assets/toutiao_logo.png"
          style="width: 100px; height: 30px"
          alt=""
        />
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" color="white" @click="searchFn" />
      </template>
    </van-nav-bar>
    <!-- 标签导航栏 -->
    <van-tabs v-model="active" animated sticky offset-top="1.22666666rem"
:before-change="beforeChangeFn"
@change="changeFn"

    >
      <van-tab
        :title="obj.name"
        v-for="obj in channelsObj"
        fixed
        :key="obj.id"
        :name="obj.id"
      >
        <!-- 文章列表 -->
        <ArticleList :channelId="obj.id"></ArticleList>
      </van-tab>
    </van-tabs>

    <!-- 编辑频道 + -->
    <van-icon
      name="plus"
      size="0.37333334rem"
      class="moreChannels"
      @click="plusFn"
    />
    <van-popup v-model="show" class="edit_wrap">
      <ChannelEdit
        @back="xiaoshiFn"
        :checkPindao="channelsObj"
        @addChannelEvent="addChannelFn"
        @delChannelEvent="delChannelFn"
      ></ChannelEdit>
    </van-popup>

    <!-- 底部反馈面板 -->
    <!-- $store.state.homeArticleShow  关联底部反馈状态 -->
    <van-action-sheet
      v-model="$store.state.homeArticleShow"
      :actions="actionArr"
      @select="onSelect"
      get-container="body"
      :cancel-text="cancelText"
      @cancel="cancelFn"
      @close="closeFn"
    />
    <!-- cancel-text取消按钮文字 -->
    <!-- 指定挂载的节点， get-container -->
  </div>
</template>

<script>
import ArticleList from '@/views/Home/ArticleList'
import ChannelEdit from './ChannelEdit'

// 获取用户的频道
import {
  getChannelAPI,
  dislikeArticleAPI,
  jubaoArticleAPI,
  setUserChannelAPI,
  delChannelAPI
} from '@/api'
import { mapState, mapMutations } from 'vuex'
const nameToTop = {}
export default {

  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      channelsObj: [], // 用户频道
      active: 2,
      actionArr: [], // 接收二级面板内容
      cancelText: '取消',
      show: false
    }
  },
  computed: {
    ...mapState(['firstAction', 'secondAction', 'artId  '])
  },
  destroyed () {
    // 页面离开,可能底部弹窗没有关闭
    this.changeActionMutations(false)
  },
  async created () {
    const res = await getChannelAPI()
    // console.log(res)
    this.channelsObj = res.data.data.channels
    this.actionArr = this.firstAction // 一级面板
  },
  methods: {
    ...mapMutations(['changeActionMutations']),
    // 点击反馈面板选项
    async onSelect (item) {
      // console.log(item)//不感兴趣 反馈垃圾内容
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      if (item.name === '反馈垃圾内容') {
        this.actionArr = this.secondAction // 二级
        this.cancelText = '返回'
      } else if (item.name === '不感兴趣') {
        const res = await dislikeArticleAPI(this.$store.state.artId)
        console.log(res)
        this.changeActionMutations(false)
      } else {
        // 举报文章
        const res = await jubaoArticleAPI({
          target: this.$store.state.artId, // 讨厌文章一个id
          type: item.value // 文章类型
        })
        console.log(res)
        this.changeActionMutations(false) // 关闭弹出层
        // setTimeout(() => {
        //   this.actionArr = this.firstAction// 一级面板
        // }, 1000)
      }
    },
    closeFn () {
      this.cancelText = '取消'
      this.actionArr = this.$store.state.firstAction
    },
    // 取消点击事件
    cancelFn () {
      if (this.cancelText === '返回') {
        this.changeActionMutations(true) // 不能让弹出层关闭
        this.actionArr = this.firstAction // 切回一级面板
        this.cancelText = '取消'
      }
    },
    plusFn () {
      this.show = true
    },
    showPopup () {
      this.show = true
    },
    // 弹框消失
    xiaoshiFn (bool) {
      this.show = bool
    },
    // 往用户已有的频道中增加频道
    async addChannelFn (channelObj) {
      this.channelsObj.push(channelObj) // 把文章加到哦用户已有的频道列表
      // console.log(channelObj)
      const newArr = []// 处理后,发给后台用
      this.channelsObj.forEach((obj, index) => {
        if (obj.id === 0) {
          // 推荐频道不传往后台
        } else {
          const newObj = { ...obj }// 把原来值拿出来
          newObj.seq = index
          delete newObj.name
          newArr.push(newObj)
        }
      })
      // 处理后保证用户添加新频道的时候后台数据也更新
      const res = await setUserChannelAPI(newArr)
      console.log(res)
    },
    // 删除用户已选择的频道ID
    async delChannelFn (channelId) {
      const res = await delChannelAPI(channelId)
      console.log(res)
      const index = this.channelsObj.findIndex(obj => obj.id === channelId)
      this.channelsObj.splice(index, 1)
    },
    // 点击进入搜索界面
    searchFn () {
      this.$router.push('/search')// 点击搜索转到搜索界面
    },
    // 切换标签前的回调函数
    beforeChangeFn () {
      nameToTop[this.active] = document.documentElement.scrollTop
      return true
    },
    // 导航栏改变触发事件
    changeFn () {
      setTimeout(() => {
        document.documentElement.scrollTop = nameToTop[this.active]
      })
    }
  }

}
</script>

<style>
/* 设置 tabs 容器的样式 */
.van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

/* // 设置小图标的样式 */
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.edit_wrap {
  width: 100%;
  height: 100%;
}
</style>
